<template>
  <div class="welcome">
    <!-- 1、面包屑导航  -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎页</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2、卡片 -->
    <el-card>
      <el-row>
        <el-col>
          {{ theme ? "dark" : "light" }}
          <el-switch v-model="theme" @change="toggleTheme()" />
        </el-col>
      </el-row>
      <div
        ref="mychartsEL"
        class="mycharts"
        style="
          width: 100%;
          height: 430px;
          border: 1px solid #ddd;
          border-radius: 5px;
        "
      />
    </el-card>
  </div>
</template>

<script setup>
/*---------------------- 引入资源 ---------------------- */
import { ArrowRight } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { ref, reactive, onMounted, onUnmounted } from "vue";

/*---------------------- 定义变量 ---------------------- */
let theme = ref(true), // echarts 的主题颜色判断，false是浅色，反之为深色
  mychartsEL = ref(), // echarts 渲染数据的视图
  mycharts = null, // echarts 对象
  // echarts 图的配置项
  option = reactive({
    legend: {},
    tooltip: {
      trigger: "axis",
      showContent: false,
    },
    dataset: {
      source: [
        ["product", "2017", "2018", "2019", "2020", "2021", "2022"],
        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
      ],
    },
    xAxis: { type: "category" },
    yAxis: { gridIndex: 0 },
    grid: { top: "55%" },
    series: [
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "pie",
        id: "pie",
        radius: "30%",
        center: ["50%", "25%"],
        emphasis: {
          focus: "self",
        },
        label: {
          formatter: "{b}: {@2022} ({d}%)",
        },
        encode: {
          itemName: "product",
          value: "2022",
          tooltip: "2022",
        },
      },
    ],
  });
/*---------------------- 功能函数 ---------------------- */
// 初始化 echarts
function initCharts() {
  //echarts 对象
  if (mycharts) {
    // 销毁对象
    mycharts.dispose();
  }
  // 初始化 echarts 对象
  mycharts = echarts.init(mychartsEL.value, theme.value ? "dark" : "");
  mycharts.on("updateAxisPointer", function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      mycharts.setOption({
        series: {
          id: "pie",
          label: {
            formatter: "{b}: {@[" + dimension + "]} ({d}%)",
          },
          encode: {
            value: dimension,
            tooltip: dimension,
          },
        },
      });
    }
  });
  mycharts.setOption(option);
}
// switch 开关切换时执行的操作
function toggleTheme() {
  initCharts();
}
// 页面渲染结束时执行的操作
onMounted(() => {
  initCharts();
  // 当窗口缩放时，重新渲染echarts图标
  window.addEventListener("resize", initCharts, false);
});
// 当页面离开时执行的操
onUnmounted(() => {
  // 当页面离开时，移除事件绑定
  window.removeEventListener("resize", initCharts, false);
});
</script>

<style lang="scss" scoped>
.el-card {
  margin: 10px 0;
}
.el-switch {
  margin-left: 10px;
}
</style>